<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="title" label="标题" width />
      <el-table-column prop="center" label="内容" width>
        <template slot-scope="scoped">
          <div v-html="scoped.row.center" />
        </template>
      </el-table-column>
      <el-table-column prop="user" label="发送对象" width />
      <el-table-column prop="created_at" label="发送时间" width />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="withdraw" :class="{ 'fade': scope.row.is_recall}" @click="withdraw(scope)">{{ scope.row.is_recall ? '已撤回' : '撤回' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { withDrawMessage } from '@/api/message'
const ERR_OK = 200
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  methods: {
    withdraw(scope) {
      this._withDrawMessage(scope.row.id)
        .then(() => {
          this.$emit('deleteItem', scope.row.id)
        })
    },
    _withDrawMessage(id) {
      return new Promise((resolve, reject) => {
        withDrawMessage(id)
          .then(res => {
            if (res.code === ERR_OK) {
              console.log(res)
              this._success(res)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject(err)
          })
      })
    },
    _success(res) {
      this.$message({
        showClose: true,
        message: res.message,
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .withdraw {
    color: #409eff;
    cursor: pointer;
    white-space: nowrap;
  }
}
.fade{
  color: #ccc !important;
}
</style>
